<template>
  <a-modal
    title="关联合同"
    :width="640"
    :visible="visible"
    :confirmLoading="loading"
    @ok="() => { $emit('ok') }"
    @cancel="() => { $emit('cancel') }"
  >
    <a-descriptions title="合同详情" :column="2">
      <a-descriptions-item label="创建时间">
        {{ this.contract.createTime? this.contract.createTime.substr(0, 10): "" }}
      </a-descriptions-item>
      <a-descriptions-item label="合同名称">
        {{ this.contract.contractName }}
      </a-descriptions-item>
      <a-descriptions-item label="合同类型">
        {{ this.contract.contractTypeName }}
      </a-descriptions-item>
      <a-descriptions-item label="签订日期">
        {{ this.contract.signDate? this.contract.signDate.substr(0, 10): "" }}
      </a-descriptions-item>
      <a-descriptions-item label="交付日期">
        {{ this.contract.deliveryDate? this.contract.deliveryDate.substr(0, 10): "" }}
      </a-descriptions-item>
    </a-descriptions>
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <a-form-item label="合同">
          <a-select
            show-search
            :filter-option="filterOption"
            v-decorator="['contractId',{ rules: [{ required: true, message: '请选择相关合同' }] }]"
            @change="contractsChoice"
            placeholder="请选择相关合同">
            <a-select-option
              v-for="i in contracts"
              :key="i.contractId"
              :values="i.contractId">
              {{ i.contractName }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { selectContractList } from '@/api/manage'

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    return {
      form: this.$form.createForm(this),
      contracts: [],
      contract: {}
    }
  },
  mounted () {

  },
  methods: {
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    contractsChoice (record) {
      for (const contract of this.contracts) {
        if (contract.contractId === record) {
          this.contract = contract
          break
        }
      }
    },
    init () {
      this.contract = {}
    },
    selectContractList2 (contractType) {
      selectContractList({
        contractType: contractType === true ? 1 : 2,
        projectId: 0
      }).then(res => {
        if (res.code === 0) {
          const newContracts = res.data
          this.contracts = newContracts
        }
      })
    }
  }
}
</script>
